<template>
    <jb-crud-page
        ref="pageRef"
        searchUrl="/aiDoc/list"
        :conditions-align="'start'"
        :searchConditions="pageConditions"
        :editComponent="DocEdit"
        :editModalWidth="1000"
    >
        <template #conditions-form>
            <jb-input
                v-model:value="pageConditions.keywords"
                placeholder="请输入关键词搜索"
                style="width: 200px"
            />
            <jb-select v-if="!props.id"
                       :disabled="props.id"
                       v-model:value="pageConditions.knowledgeBaseId"
                       url="/aiKnowledgeBase/listAllEnabled" labelField="name" valueField="id" :filterable="true"
                       placeholder="请选择知识库"
                       style="width: 160px"
                       clearable
            />
            <jb-select
                v-model:value="pageConditions.dataType"
                url="/aiDoc/getDataTypeList"
                placeholder="来源"
                style="width: 160px"
                clearable
            />

            <jb-select
                v-model:value="pageConditions.status"
                placeholder="文件状态"
                style="width: 180px"
                clearable
                url="/aiFile/getTypeList"
            >

            </jb-select>
        </template>

        <template #opt>
            <jb-btn
                type="primary"
                secondary
                @click="pageRef.showEditModal('新增AI文档库',{knowledgeBaseId:props.id})"
            >新增AI文档库
            </jb-btn>
        </template>

        <template #default="{list,tableStartIndex}">
            <jb-table
                :data="list"
                :start-index="tableStartIndex"
            >
                <jb-column type="seq" title="序号" width="60" fixed="left"/>
                <!--                <jb-column-->
                <!--                    field="title"-->
                <!--                    title="问题/内容"-->
                <!--                    min-width="200"-->
                <!--                    fixed="left"-->
                <!--                />-->
                <jb-column
                    field="content"
                    title="问题/内容"
                    min-width="200"
                    fixed="left"
                >
                    <template #default="{row}">
                        <jb-btn
                            class="mx-8px"
                            quaternary
                            text
                            icon=" "
                            modalTitle="关联问题"
                            :modalArgs="{'positiveText':'','negative-text':'', style:{maxWidth:'1000px'}}"
                            secondary
                            modalWidth="70%"
                            :modalComponent="QuestionAdd"
                            :modalComponentProps="{docId: row.id,docItem:row}"

                        >
                            {{ row.content }}
                        </jb-btn>

                    </template>


                </jb-column>
                <jb-column
                    field="answer"
                    title="答案"
                    min-width="200"
                >
                    <template #default="{row}">
                        {{ row.answer ? row.answer : row.parentContent }}

                    </template>
                </jb-column>
                <jb-column v-if="!props.id"
                           field="aiKnowledgeBaseName"
                           title="知识库"
                           min-width="120"
                />
                <jb-column
                    field="docStatuesName"
                    title="状态"
                    min-width="160"
                >
                    <template #default="{row}">
                        <n-tag v-if="row.docStatuesName=='未训练'" type="warning">{{ row.docStatuesName }}</n-tag>
                        <n-tag v-if="row.docStatuesName=='训练中'" type="info">{{ row.docStatuesName }}</n-tag>
                        <n-tag v-if="row.docStatuesName=='训练成功'" type="success">{{ row.docStatuesName }}</n-tag>
                        <n-tag v-if="row.docStatuesName=='训练失败'" type="error">{{ row.docStatuesName }}</n-tag>
                        <n-tag v-if="row.docStatuesName=='向量化中'" type="info">{{ row.docStatuesName }}</n-tag>
                        <n-tag v-if="row.docStatuesName=='向量化成功'" type="success">{{ row.docStatuesName }}</n-tag>
                        <n-tag v-if="row.docStatuesName=='向量化失败'" type="error">{{ row.docStatuesName }}</n-tag>
                    </template>
                </jb-column>
                <jb-column
                    field="fileName"
                    title="文件"
                    min-width="120"
                />
                <jb-column
                    field="dataType"
                    title="来源"
                    min-width="100"
                >
                    <template #default="{row}">
                        <n-tag type="success" v-if="row.dataType === 'customText'">
                            自定义文本
                        </n-tag>
                        <n-tag type="info" v-else>
                            文件块
                        </n-tag>
                    </template>
                </jb-column>
                <jb-column
                    field="docType"
                    title="数据类型"
                    min-width="100"
                >
                    <template #default="{row}">
                        <n-tag type="warning" v-if="row.docType == 'QA'">
                            QA
                        </n-tag>
                        <n-tag v-else>
                            NORMAL
                        </n-tag>
                    </template>
                </jb-column>

                <jb-column
                    field="embedTime"
                    title="向量化时间"
                    min-width="160"
                />
                <jb-column
                    title="关联问题"
                    min-width="130"
                >
                    <template #default="{ row }">
                        <jb-btn
                            class="mx-8px"
                            type="info"
                            icon=""
                            modalTitle="关联问题"
                            :modalArgs="{'positiveText':'','negative-text':'', style:{maxWidth:'1000px'}}"
                            secondary
                            modalWidth="70%"
                            :modalComponent="QuestionAdd"
                            :modalComponentProps="{docId: row.id,docItem:row}"

                        >
                            <i v-if="row.questionNum && row.questionNum > 0" class="fas fa-lightbulb"></i>
                            <i v-else class="far fa-lightbulb text-blue-500"></i>
                            &nbsp;
                            关联问题
                        </jb-btn>
                    </template>


                </jb-column>
                <jb-column
                    field="createTime"
                    title="创建时间"
                    min-width="160"
                />
                <jb-column
                    title="操作"
                    width="120"
                    fixed="right"
                >
                    <template #default="{ row }">
                        <jb-btn
                            class="mx-8px"
                            type="warning"
                            :icon="Icons.EDIT"
                            :editModalWidth=1200
                            secondary
                            circle
                            @click="pageRef.showEditModal('编辑AI文档库',{id:row.id})"
                        />
                        <jb-btn
                            type="error"
                            class="mx-8px"
                            :icon="Icons.DELETE"
                            secondary
                            circle
                            :confirmText="'确认删除此文件？'"
                            :url="`/aiDoc/delete/${row.id}`"
                            @success="pageRef.loadData()"
                        />
                    </template>
                </jb-column>
            </jb-table>
        </template>
    </jb-crud-page>
</template>

<script setup>
import {ref} from 'vue'
import {Icons} from '@/constants'
import {useMessage} from 'naive-ui'
import {useResetableData} from '@/hooks/common/use-resetable-data'
import DocEdit from './components/doc_edit.vue'
import QuestionAdd from "@/views/ai_doc/components/question_add.vue";


const props = defineProps({
    id: String
})

const message = useMessage()
const pageRef = ref(null)

// 页面查询条件
const pageConditions = useResetableData({
    keywords: '',
    knowledgeBaseId: props.id,
    dataType: null,
    trainStatus: null,
    vectorStatus: null
})

</script>

<style scoped>
.jb-crud-page :deep(.conditions-form) {
    gap: 12px;
}
</style>
